<template>
  <div class="about">
    <!-- top -->
    <TopView name="about" title="关于我" msg="不知道会遇见什么，只知道阳光这么好，别辜负了这么美好的今天"></TopView>

    <div class="about-wrap">
      <div class="content">
        <el-image src="https://test-1256689020.cos.ap-nanjing.myqcloud.com/images/qq5.jpg" lazy fit="cover" />
        <h2>巨蟹座不吃鱼</h2>
        <div class="icons">
          <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
            <div slot="content">
              <img src="../assets/taoqimao.jpg" />
              <h3>公众号</h3>
            </div>
            <div class="circle"><i class="fa fa-user"></i></div>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
            <div slot="content">
              <img src="../assets/wechat.jpg" />
              <h3>微信</h3>
            </div>
            <div class="circle"><i class="fa fa-wechat"></i></div>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
            <div slot="content">
              <img src="../assets/qq.jpg" />
              <h3>QQ</h3>
            </div>
            <div class="circle"><i class="fa fa-qq"></i></div>
          </el-tooltip>
          <a href="https://gitee.com/MaoNuQQ" target="_blank">
            <el-tooltip class="item" effect="dark" content="点击跳转到 Gitee" placement="bottom">
              <div class="circle"><i class="fa fa-github"></i></div>
            </el-tooltip>
          </a>
          <a href="https://juejin.cn/user/333882708472920" target="_blank">
            <el-tooltip class="item" effect="dark" content="点击跳转到稀土掘金" placement="bottom">
              <div class="circle"><i class="fa fa-paper-plane"></i></div>
            </el-tooltip>
          </a>
          <el-tooltip class="item" effect="dark" content="1284801439@qq.com" placement="bottom">
            <div class="circle"><i class="fa fa-envelope"></i></div>
          </el-tooltip>
        </div>
        <div class="detail">
          <p>感谢各位莅临小站</p>
          <p>有朋自远方来，不亦乐乎</p>
          <p>本人 “巨蟹座不吃鱼”</p>
          <p>90后</p>
          <p>吃、喝、玩、乐，无“恶”不做</p>
          <p>平时最喜欢的活动就是养养猫，画画画，游游泳，打打云顶</p>
          <p>目前有三只小宝贝：爱做梦的爆鱼仔、喜欢哼哼唧唧的豆包咪、动不动贵妃躺的小饼子</p>
          <p>现在的状态是能摆烂就摆烂，能躺平就不瞎折腾，并且期待早日过上退休生活</p>
        </div>

        <div class="pays">
          <h1>打赏本站</h1>
          <h3>于茫茫人海之中能得您的驻足，相信是一种缘分，如果您觉得还算满意，可否打赏一杯咖啡解解乏</h3>
          <div class="pics">
            <div class="zfb">
              <el-image :src="require('../assets/zfb.jpg')" lazy fit="cover" />
              <h3>支付宝</h3>
            </div>
            <div class="wx">
              <el-image :src="require('../assets/wx.jpg')" lazy fit="cover" />
              <h3>微信</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopView from '@/components/TopView.vue'
export default {
  name: 'AboutView',
  components: {
    TopView
  },
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
img {
  width: 120px;
  height: 120px;
  vertical-align: middle;
  max-width: 100%;
  background-color: transparent;
  object-fit: cover;
}

h3 {
  margin-top: 10px;
  text-align: center;
}

.about {
  height: 100%;
  width: 100%;

  .about-wrap {
    width: 100%;
    height: auto;
    padding: 0 10%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    top: -60px;
    left: 0;

    .content {
      width: 80%;
      height: auto;
      margin: 0 auto;
      padding: 20px 80px;
      box-sizing: border-box;
      border-radius: 5px;
      opacity: 0.95;
      text-align: center;
      background-color: #fff;
      margin-bottom: 30px;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

      h2 {
        font-family: 'STXingkai';
      }

      .el-image {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        vertical-align: middle;
        max-width: 100%;
        margin: 20px 0;
      }

      .icons {
        width: 350px;
        padding: 10px 30px;
        box-sizing: border-box;
        margin: 10px auto;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #0bbd87;

        .circle {
          width: 40px;
          height: 40px;
          background-color: #0bbd87;
          color: #fff;
          line-height: 40px;
          border-radius: 50%;
        }
      }

      .detail {
        text-align: center;
        padding: 10px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #0bbd87;
        margin-bottom: 20px;

        p {
          line-height: 50px;
        }
      }

      .pays {
        color: #0bbd87;

        h1 {
          color: #0bbd87;
        }

        .pics {
          width: 500px;
          margin: 20px auto;
          padding: 10px 0;
          box-sizing: border-box;
          border-radius: 5px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-around;
          align-items: center;
          border: 1px solid #0bbd87;

          .el-image {
            border-radius: 5px;
            margin: 0;
          }
        }
      }
    }
  }
}
</style>
